<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>简易聊天室</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .list-group {
            height: 500px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 输出访问用户的IP -->
    <h1 class="well">简易聊天室
        <small id="ip">欢迎 <%= ip %></small>
    </h1>
    <!-- 聊天界面 -->
    <ul class="list-group">
        <li class="list-group-item">还没有人发言...</li>
    </ul>

    <!-- 底部输入框 -->
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" id="msg" class="form-control" placeholder="说点什么...">
                    <button id="btn" class="btn btn-default">发言</button>
                </div>
            </div>
        </div>
    </nav>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.min.js"></script>
<script>
    // 得到socket.io对象
    var socket = io();

    // 点击 发送消息
    $('#btn').click(function () {
        // 把文本框的内容 发送到服务器
        socket.emit(
            'clientOut',
            {
                msg: $('#msg').val(),
                ip: $('#ip').html()
            }
        );
        // 清空输入框的内容
        $('#msg').val('');
    });

    // 回车 发送消息
    $('#msg').keydown(function (e) {
        if (e.keyCode == 13) {
            // 把文本框的内容发送到服务器
            socket.emit(
                'clientOut',
                {
                    msg: $('#msg').val(),
                    ip: $('#ip').html()
                }
            );
            // 清空输入框的内容
            $('#msg').val('');
        }
    });

    // 接收服务器的信息
    socket.on('serverOut', function (serverMsg) {
        console.log(serverMsg);
        // 拼接输出的信息
        var html = '<li class="list-group-item text-primary"><b>' + serverMsg.ip + '</b> : ' + serverMsg.msg + '</li>';
        // 最前插入最新消息
        $('.list-group').prepend(html);
    });

</script>
</body>
</html>




